<template>
    <div class="detail">
        <!-- 商品分类导航 -->
        <TypeNav/>

        <!-- 主要内容区域 -->
        <section class="con">
            <!-- 导航路径区域 -->
            <div class="conPoin">
                <span v-for="item  in categoryView" :key="item.categoryId">{{ item.categoryName }}</span>
            </div>
            <!-- 主要内容区域 -->
            <div class="mainCon">
                <!-- 左侧放大镜区域 -->
                <div class="previewWrap">
                    <!--放大镜效果-->
                    <ImageZoom :image="zoomImg"/>
                    <!-- 小图列表 -->
                    <ImageList :images="skuInfo?.skuImageList" @select="changeZoom"/>
                </div>
                <!-- 右侧选择区域布局 -->
                <div class="InfoWrap">
                    <SkuInfo :sku-info="skuInfo"></SkuInfo>

                    <SkuSaleAttr :sale-attrs="skuDetail.spuSaleAttrList"></SkuSaleAttr>
                    <CartControl @add="addToCart"></CartControl>
                </div>
            </div>
        </section>
        <ProductDetail></ProductDetail>

    </div>
</template>

<script lang="ts" setup>
import ImageList from './ImageList/ImageList.vue'
import ImageZoom from '@/components/ImageZoom/index.vue';
import SkuInfo from "./SkuInfo.vue";
import SkuSaleAttr from "./SkuSaleAttr.vue";
import TypeNav from "@/components/TypeNav/index.vue";
import {getSkuDetail} from "@/api/product";
import {addCart} from '@/api/cart'
import {computed, onMounted, ref} from "vue";
import CartControl from "./CartControl.vue";
import ProductDetail from "./ProductDetail.vue";
import {useRouter} from "vue-router";

const props = defineProps<{
    skuId: string;
}>();
const router = useRouter();
let skuDetail: any = ref({
    spuSaleAttrList: [],
    skuInfo: {
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
        skuImageList: [],
    }
});
let zoomImg: any = ref('');
onMounted(() => {
    getSkuDetail(props.skuId).then(({data}) => {
            skuDetail.value = data;
            zoomImg.value = data.skuInfo.skuImageList[0].imgUrl;
        }
    ).catch((err) => {
    })
})
const skuInfo = computed(() => {
    return skuDetail.value.skuInfo;
})

function changeZoom(img: any) {
    zoomImg.value = img.imgUrl;
}

const categoryView = computed(() => {
    let categoryView = skuDetail.value.categoryView;
    let res: [{ categoryId: string, categoryName: string; }] = [] as any;
    if (!categoryView) {
        return res;
    }
    let {category1Id, category1Name, category2Id, category2Name, category3Id, category3Name} = categoryView;
    (category1Id && category1Name) && res.push({categoryId: category1Id, categoryName: category1Name});
    (category2Id && category2Name) && res.push({categoryId: category2Id, categoryName: category2Name});
    (category3Id && category3Name) && res.push({categoryId: category3Id, categoryName: category3Name});
    return res;
});

/**
 * 加入购物车
 * @param skuNum
 */
function addToCart(skuNum: number) {
    addCart(props.skuId, skuNum).then(() => {
        router.push({name: 'addCartSuccess', query: {skuNum: skuNum, skuId: props.skuId}})
    })
}
</script>

<style lang="less" scoped>
.detail {
    .con {
        width: 1200px;
        margin: 15px auto 0;

        .conPoin {
            padding: 9px 15px 9px 0;

            & > span + span:before {
                content: "/\00a0";
                padding: 0 5px;
                color: #ccc;
            }
        }

        .mainCon {
            overflow: hidden;
            margin: 5px 0 15px;

            .previewWrap {
                float: left;
                width: 400px;
                position: relative;
            }

            .InfoWrap {
                width: 700px;
                float: right;
            }
        }
    }


}
</style>
